<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 400px;
            height: 600px;
            margin: auto;
            margin-top: 30px;
            background: pink url(https://tse2-mm.cn.bing.net/th/id/OIP-C.vqqbwKfhe9ieuPHxK_Y8SQHaKe?w=192&h=272&c=7&r=0&o=5&dpr=1.3&pid=1.7) no-repeat center/cover;
        }

        .cont {
            width: 300px;
            height: 500px;
            background-color: rgba(255, 255, 255, 0.7);
            margin: auto;
            position: relative;
            top: 50px;
        }

        h1 {
            text-align: center;
            line-height: 100px;
        }

        p {
            text-align: center;
            line-height: 30px;
        }

        .chaname {
            font-size: 36px;
            background-color: lightgreen;
            line-height: 50px;
        }

        .chajia {
            font-weight: bolder;
            color: red;
        }

        img {
            width: 200px;
            height: 200px;
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <!-- <div class="cont">
            <h1>商品详情</h1>
            <img src=${item.img}>
            <p>名字:${item.goods_name}</p>
            <p>id:${item.id}</p>
            <p>库存:${item.stock}</p>
            <p>价格:${item.price}</p>
            <p>状态:${item.status}</p>
            <p>已售:${item.sold}</p>
        </div> -->
    </div>
    <script>
        var box = document.getElementById(("box"))
        var idd = localStorage.getItem("id")
        var xhr = new XMLHttpRequest()
        xhr.open("GET", `https://liu.zzgoodqc.cn/goodsx/detail?id=${idd}`)
        xhr.send()
        xhr.onload = function () {
            var arr = JSON.parse(xhr.response).data
            console.log(arr);
            
            box.innerHTML = ""
                box.innerHTML += `
                    <div class="cont">
                        <h1>商品详情</h1>
                        <img src=${arr.img}>
                        <p>名字:${arr.goods_name}</p>
                        <p>id:${arr.id}</p>
                        <p>库存:${arr.stock}</p>
                        <p>价格:${arr.price}</p>
                        <p>状态:${arr.status}</p>
                        <p>已售:${arr.sold}</p>
                    </div>`
        }
        xhr.onerror = function (e) {
            console.log(e);
        }
    </script>
</body>

</html>